<template>
  <el-card class="content-card">
    <template #header>
      <div class="card-header">
        <h3>部门统计</h3>
        <div class="header-right">
          <el-button type="text" @click="refreshChart" size="small">
            <el-icon :size="16">
              <Refresh />
            </el-icon>
            刷新
          </el-button>
        </div>
      </div>
    </template>
    <div class="chart-container">
      <div id="department-chart" ref="departmentChartRef" class="chart"></div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import * as echarts from 'echarts'
  import { Refresh } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'

  interface DepartmentData {
    name: string
    value: number
  }

  interface Props {
    departmentData: DepartmentData[]
  }

  const props = defineProps<Props>()
  const departmentChartRef = ref<HTMLDivElement>()
  let departmentChartInstance: echarts.ECharts | null = null

  // 初始化图表
  const initChart = () => {
    if (!departmentChartRef.value || props.departmentData.length === 0) return

    if (departmentChartInstance) {
      departmentChartInstance.dispose()
    }

    departmentChartInstance = echarts.init(departmentChartRef.value)

    const option = {
      tooltip: {
        trigger: 'item' as const,
        formatter: '{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'horizontal' as const,
        bottom: 10,
        left: 'center',
        textStyle: {
          fontSize: 12,
        },
      },
      series: [
        {
          name: '部门统计',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '40%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: props.departmentData,
        },
      ],
    }

    departmentChartInstance.setOption(option as any)
  }

  // 刷新图表
  const refreshChart = () => {
    if (!departmentChartInstance) {
      initChart()
    } else {
      const option = {
        series: [
          {
            data: props.departmentData,
          },
        ],
      }
      departmentChartInstance.setOption(option as any)
      ElMessage.success('图表已刷新')
    }
  }

  // 响应窗口大小变化
  const handleResize = () => {
    if (departmentChartInstance) {
      departmentChartInstance.resize()
    }
  }

  onMounted(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })

  onBeforeUnmount(() => {
    if (departmentChartInstance) {
      departmentChartInstance.dispose()
    }
    window.removeEventListener('resize', handleResize)
  })
</script>

<style scoped>
  /* 部门统计图表样式 */
  .content-card {
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: none;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .chart-container {
    height: 300px;
    width: 100%;
  }

  .chart {
    width: 100%;
    height: 100%;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .chart-container {
      height: 250px;
    }
  }
</style>
